<style>
.con {
  /* display: flex;
    justify-content: center;
    align-items: center; */
  margin-top: 20px;
  /* border: 1px solid #ccc;  :model="proNewProcure" */
}
</style>
<template>
  <div class="con">
    <el-form ref="form" :rules="rules" label-width="150px">
      <el-col :span="6">
        <el-form-item label="货号" prop="productNo">
          <el-input
            v-model="proTemplate.productNo"
            placeholder="请输入货号"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="产品图" prop="picUrl">
          <image-preview
            :src="proTemplateSecondry.picUrl"
            :width="80"
            :height="80"
          />
        </el-form-item>
        <!-- //-----------新增或修改方法里上传图片 v-show="scope.row.picUrl"-->
        <!-- <el-form-item label="图片地址" prop="picUrl">
                <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                    :on-exceed="handleExceed" :on-success="handlePictureSuccessPic" :before-upload="beforeAvatarUpload"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                :on-preview="handlePictureCardPreview" :file-list="files">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <i class="el-icon-plus"></i>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </el-upload>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <img width="100%" v-if="picUrl" :src="picUrl" alt="">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </el-dialog>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </el-form-item> -->
        <el-form-item label="颜色属性" prop="colorProperty">
          <el-input
            v-model="proTemplateSecondry.colorProperty"
            placeholder="请输入颜色属性"
            :disabled="true"
          />
        </el-form-item>
        <!-- <el-form-item label="尺寸" prop="proTemplateSizeList">
                <el-checkbox-group v-model="checked" @change="test">
                    <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id" :disabled="true">{{
                        item.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="logo图片" prop="logoUrl">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="right" width="auto">
                            <template #default>
                                <img :src='pjtUrl + proTemplateSecondry.logoUrl'
                                    style="object-fit: contain;width: 300px;height: 200px;">
                            </template>
                                                                                                                                                                                                                                                                                                                                                                    <template #reference>
                                                                                                                                                                                                                                                                                                                                                                        <img :src='pjtUrl + proTemplateSecondry.logoUrl'
                                style="object-fit: contain;width: 100px; height: 100px" />
                        </template>
                    </el-popover>
                </template>
            </el-form-item> -->
        <!-- //-----------新增或修改方法里上传图片 v-show="scope.row.logoUrl"-->
        <!-- <el-form-item label="logo图片" prop="logoUrl">
                <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                    :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                :on-preview="handlePictureCardPreview" :file-list="fileList">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </el-upload>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </el-dialog>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </el-form-item> -->
        <!-- <el-form-item label="生产厂家代码" prop="manufacturerCode">
                                                                                                                                                                                                                                                                                                                                                            <el-input v-model="proTemplate.manufacturerCode" placeholder="请输入生产厂家代码" :disabled="true" />
                                                                                                                                                                                                                                                                                                                                                        </el-form-item> -->

        <el-form-item label="设计-设计师" prop="designDesigners">
          <!-- <el-input v-model="proTemplate.designDesigners" placeholder="请输入设计-设计师" />  @change="changeFirst"-->
          <el-select
            v-model="proTemplate.designDesigners"
            placeholder="请选择设计师"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_product_design"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-面料名称" prop="designFabricName">
          <el-select
            v-model="proTemplate.designFabricName"
            placeholder="请选择面料名称"
            clearable
            @change="change"
            :disabled="true"
            filterable
          >
            <el-option
              v-for="dict in mianliao"
              :key="dict"
              :label="dict"
              :value="dict"
            />
          </el-select>
          <el-button @click="handledata">同步面料最新数据</el-button>
          <!-- <el-input v-model="proTemplate.designFabricName" placeholder="请输入设计-面料名称" @blur="updateData"
                    @keyup.enter.native="enterBlur($event)" /> -->
          <!-- <el-select style="width:100%" v-model="proTemplate.designFabricName" filterable remote
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :loading='lodingy' allow-create @visible-change="editSelect" default-first-option
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :remote-method="remoteMethod" placeholder="请选择过滤内容" blur="updateData"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            @keyup.enter.native="enterBlur($event)">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <el-option v-for="item in options" :key="item" :value="item">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </el-option>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </el-select> -->
        </el-form-item>
        <el-form-item label="设计-运动强度" prop="designExerciseIntensity">
          <el-input
            v-model="proTemplate.designExerciseIntensity"
            placeholder="请输入设计-运动强度"
          />
        </el-form-item>
        <el-form-item label="设计-弹性" prop="designFlexibility">
          <el-input
            v-model="proTemplate.designFlexibility"
            placeholder="请输入设计-弹性"
          />
        </el-form-item>
        <el-form-item label="设计-健身层级" prop="designFitnessLevels">
          <el-input
            v-model="proTemplate.designFitnessLevels"
            placeholder="请输入设计-健身层级"
          />
        </el-form-item>
        <el-form-item label="设计-体感" prop="designSomatosensory">
          <el-input
            v-model="proTemplate.designSomatosensory"
            placeholder="请输入设计-体感"
          />
        </el-form-item>
        <el-form-item label="设计-柔软度" prop="designSoftness">
          <el-input
            v-model="proTemplate.designSoftness"
            placeholder="请输入设计-柔软度"
          />
        </el-form-item>
        <el-form-item label="设计-面料厚度" prop="designFabricThickness">
          <el-input
            v-model="proTemplate.designFabricThickness"
            placeholder="请输入设计-面料厚度"
          />
        </el-form-item>
        <el-form-item label="设计-透气度" prop="designBreathability">
          <el-input
            v-model="proTemplate.designBreathability"
            placeholder="请输入设计-透气度"
          />
        </el-form-item>
      </el-col>
      <el-col :span="1"><el-form-item></el-form-item></el-col>
      <el-col :span="7">
        <el-form-item label="设计-系列" prop="designSeries">
          <el-input
            v-model="proTemplate.designSeries"
            placeholder="请输入设计-系列"
          />
        </el-form-item>
        <el-form-item label="设计-主题" prop="mainScene">
          <el-input
            v-model="proTemplate.mainScene"
            placeholder="请输入设计-主题"
          />
        </el-form-item>
        <el-form-item label="设计-场景名" prop="designScene">
          <!-- <el-input v-model="proTemplate.designScene" placeholder="请输入设计-场景名" /> -->
          <el-select
            v-model="proTemplate.designScene"
            placeholder="请选择场景名"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_product_scene"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-拍摄场景建议" prop="designShootingScene">
          <!-- <el-input v-model="proTemplate.designShootingScene" placeholder="请输入设计-拍摄场景建议" /> -->
          <el-input
            v-model="proTemplate.designShootingScene"
            placeholder="请输入设计-拍摄场景建议"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="ShootingScene"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickShootingScene"
            v-model="designShootingScene"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="设计-拍摄样板进度" prop="designShootingSample">
          <!-- <el-input v-model="proTemplateSecondry.designShootingSample" placeholder="请输入设计-拍摄样板进度" /> -->
          <el-input
            v-model="proTemplateSecondry.designShootingSample"
            placeholder="请输入设计-拍摄样板进度"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 12 }"
            :style="{ width: '100%' }"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="设计-培训" prop="designTraining">
          <!-- <el-input v-model="proTemplateSecondry.designTraining" placeholder="请输入设计-培训" /> -->
          <el-select
            v-model="proTemplateSecondry.designTraining"
            placeholder="请选择培训状态"
            clearable
            filterable
          >
            <el-option
              v-for="dict in dict.type.sys_one_designtraining"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-特殊面料信息" prop="designSpecialFabric">
          <el-input
            v-model="proNewRelation.designSpecialFabric"
            placeholder="请输入设计-特殊面料信息"
          />
        </el-form-item>

        <el-form-item label="设计-面料功能" prop="designFabricFunction">
          <el-input
            v-model="proTemplate.designFabricFunction"
            placeholder="请输入设计-面料功能"
          />
        </el-form-item>

        <!-- <el-form-item label="设计-产品分类" prop="designProductCategories">
                    <el-input v-model="proTemplate.designProductCategories" placeholder="请输入设计-产品分类" />
                </el-form-item> -->
        <el-form-item label="设计-胸垫/裤裆" prop="designChestPad">
          <!-- <el-input v-model="proTemplate.designChestPad" placeholder="请输入设计-胸垫/裤裆" /> -->
          <el-select
            v-model="proTemplate.designChestPad"
            placeholder="请选择胸垫/裤裆"
            clearable
          >
            <el-option
              v-for="dict in kudang"
              :key="dict.value"
              :label="dict.attributesValue"
              :value="dict.attributesValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-防震程度/腰高" prop="designShockproofDegree">
          <!-- <el-input v-model="proTemplate.designShockproofDegree" placeholder="请输入设计-防震程度/腰高" /> -->
          <el-select
            filterable
            v-model="proTemplate.designShockproofDegree"
            placeholder="请选择胸垫/裤裆"
            clearable
          >
            <el-option
              v-for="dict in yaogao"
              :key="dict.value"
              :label="dict.attributesValue"
              :value="dict.attributesValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-聚拢程度" prop="designGatheringDegree">
          <!-- <el-input v-model="proTemplate.designGatheringDegree" placeholder="请输入设计-聚拢程度" /> -->
          <el-select
            filterable
            v-model="proTemplate.designGatheringDegree"
            placeholder="请选择胸垫/裤裆"
            clearable
          >
            <el-option
              v-for="dict in julong"
              :key="dict.value"
              :label="dict.attributesValue"
              :value="dict.attributesValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-里料材质" prop="designLiningMaterial">
          <!-- <el-input v-model="proTemplate.designLiningMaterial" placeholder="请输入设计-里料材质" /> -->
          <el-select
            v-model="proTemplate.designLiningMaterial"
            placeholder="里料材质"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_product_yf"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="设计-属性类别/商品描述"
          prop="designPropertyCategory"
          label-width="170px"
        >
          <!--@blur="updateData" @keyup.enter.native="enterBlur($event)" <el-input v-model="proTemplate.designPropertyCategory" placeholder="请输入设计-属性类别/商品描述" /> -->
          <!-- <el-input v-model="proTemplate.designPropertyCategory" placeholder="请输入属性类别" @change="change"/> -->
          <el-select
            v-model="proTemplate.designPropertyCategory"
            placeholder="请选择属性类别"
            clearable
          >
            <el-option
              v-for="dict in shuxing"
              :key="dict.value"
              :label="dict.attributesValue"
              :value="dict.attributesValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-版型/罩杯" prop="designFitCup">
          <!-- <el-input v-model="proTemplate.designFitCup" placeholder="请输入设计-版型/罩杯" @change="change"/> -->
          <el-select
            v-model="proTemplate.designFitCup"
            placeholder="请选择版型/罩杯"
            clearable
          >
            <el-option
              v-for="dict in banxing"
              :key="dict.value"
              :label="dict.attributesValue"
              :value="dict.attributesValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-适合体型" prop="designSuitableBody">
          <!-- <el-input v-model="proTemplate.designSuitableBody" placeholder="请输入设计-适合体型" @change="change"/> -->
          <el-select
            v-model="proTemplate.designSuitableBody"
            placeholder="请选择适合体型"
            clearable
          >
            <el-option
              v-for="dict in attributesList"
              :key="dict.value"
              :label="dict.attributesValue"
              :value="dict.attributesValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-衣长/裤长" prop="designGarmentTrouser">
          <!-- <el-input v-model="proTemplate.designGarmentTrouser" placeholder="请输入设计-衣长/裤长" /> -->
          <el-select
            v-model="proTemplate.designGarmentTrouser"
            placeholder="请选择适合衣长/裤长"
            clearable
          >
            <el-option
              v-for="dict in yichang"
              :key="dict.value"
              :label="dict.attributesValue"
              :value="dict.attributesValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计-建议尺码" prop="designRecommendedSizes">
          <el-input
            v-model="proTemplate.designRecommendedSizes"
            placeholder="请输入设计-建议尺码"
          />
        </el-form-item>
        <el-form-item label="设计-尺码" prop="designSize">
          <el-input
            v-model="proTemplate.designSize"
            placeholder="请输入设计-尺码"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 12 }"
            :style="{ width: '100%' }"
            :disabled="true"
          />
        </el-form-item>
      </el-col>
      <el-col :span="1"><el-form-item></el-form-item></el-col>
      <el-col :span="8">
        <el-form-item
          label="设计-特别呈现卖点"
          prop="designSpecialPresentation"
        >
          <el-input
            v-model="proTemplate.designSpecialPresentation"
            placeholder="请输入设计-特别呈现卖点"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="queryOptions"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickSelect"
            v-model="xxxx"
          ></el-autocomplete>
        </el-form-item>
        <!-- <el-form-item label="关键词" prop="">
                    
                </el-form-item> -->
        <el-form-item label="设计-洗涤说明" prop="designWashing">
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="queryOption"
            placeholder="请输入洗涤说明"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :debounce="0"
            :style="{ width: '100%' }"
            @select="clickSelectMark"
            v-model="proTemplate.designWashing"
          ></el-autocomplete>
        </el-form-item>

        <el-form-item label="设计-样品特殊情况" prop="designSpecialCases">
          <el-input
            v-model="proNewRelation.designSpecialCases"
            placeholder="请输入设计-样品特殊情况"
            :disabled="true"
          />
        </el-form-item>
        <!-- :on-change="changeFile1" :show-file-list="false"-->
        <!-- <el-form-item label="设计-样品特殊情况(图片)" prop="designSpecialCasesPic" label-width="170px">
                    <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                        :on-exceed="handleExceed" :on-success="handlePictureSuccessSpecial" :on-change="changeFile1"
                        :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview" :file-list="fileSpecial">

                                            <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" v-if="Special" :src="pjtUrl + Special" alt="">
                    </el-dialog>
                </el-form-item> -->
        <el-form-item label="样品特殊情况(图片)" prop="designSpecialCasesPic">
          <!-- <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                                                        :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                                                        :on-preview="handlePictureCardPreview" :file-list="fileList" :on-change="changeFile2">
                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                    </el-upload>
                                                                                                                                                    <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                        <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                                        </el-dialog> -->
          <!-- <el-upload ref="uploadSpecial" :action="imgUpload.url" :headers="imgUpload.headers"
                        list-type="picture-card" :on-change='changeSpecial' :file-list="imgSpecial" multiple
                        :on-success="uploadSpecial">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <div id="preview" @paste="handleSpecial">
                        <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
                    </div> -->
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="click"
              placement="right"
              width="auto"
            >
              <template #default>
                <img
                  :src="pjtUrl + proNewRelation.designSpecialCasesPic"
                  style="object-fit: contain; width: 800px; height: 600px"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + proNewRelation.designSpecialCasesPic"
                  style="object-fit: contain; width: 100px; height: 100px"
                />
              </template>
            </el-popover>
          </template>
        </el-form-item>
        <el-form-item label="设计-搭配(货号)" prop="designMatchingNumber">
          <el-input
            v-model="proNewRelation.designMatchingNumber"
            placeholder="请输入设计-搭配"
          />
        </el-form-item>
        <!-- //-----------新增或修改方法里上传图片 -->
        <!-- <el-form-item label="设计-搭配(图片)" prop="customerPicture">
                    <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                        :on-exceed="handleExceed" :on-success="handlePictureSuccessCustomer"
                        :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview" :file-list="fileLi"
                                    :on-change="changeFile2">
                                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                </el-dialog>
            </el-form-item> -->
        <el-form-item label="设计-搭配(图片)" prop="designMatchingPicture">
          <!-- <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                                                        :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                                                        :on-preview="handlePictureCardPreview" :file-list="fileList" :on-change="changeFile2">
                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                    </el-upload>
                                                                                                                                                    <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                        <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                                        </el-dialog> -->
          <el-upload
            ref="uploadMatchingPicture"
            :action="imgUpload.url"
            :headers="imgUpload.headers"
            list-type="picture-card"
            :on-change="changeMatchingPicture"
            :file-list="fileMatchingPicture"
            multiple
            :on-success="uploadMatchingPicture"
            :on-remove="RemoveMatchingPicture"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handleMatchingPicture">
            <span
              ><i class="el-icon-s-opportunity" style="color: #fb894c"></i
              >点击此处 将图片按Ctrl+V 粘贴至此处</span
            >
          </div>
        </el-form-item>
        <el-form-item label="设计-其他搭配货号" prop="designRecommendNumber">
          <el-input
            v-model="proTemplate.designRecommendNumber"
            placeholder="请输入设计-推荐其他搭配"
          />
        </el-form-item>
        <!-- //-----------新增或修改方法里上传图片 -->
        <!-- <el-form-item label="设计-其他搭配(图片)" prop="customerPicture">
                    <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                        :on-exceed="handleExceed" :on-success="handlePictureSuccessRecommendPicture"
                        :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview"
                                        :file-list="fileRecommendPicture" :on-change="changeFile3">
                                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                    </el-dialog>
                </el-form-item> -->
        <el-form-item label="设计-其他搭配(图片)" prop="designRecommendPicture">
          <!-- <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                                                        :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                                                        :on-preview="handlePictureCardPreview" :file-list="fileList" :on-change="changeFile2">
                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                    </el-upload>
                                                                                                                                                    <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                        <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                                        </el-dialog> -->
          <el-upload
            ref="uploadRecommendPicture"
            :action="imgUpload.url"
            :headers="imgUpload.headers"
            list-type="picture-card"
            :on-change="changeRecommendPicture"
            :file-list="fileRecommendPicture"
            multiple
            :on-success="uploadRecommendPicture"
            :on-remove="RemoveRecommendPicture"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handleRecommendPicture">
            <span
              ><i class="el-icon-s-opportunity" style="color: #fb894c"></i
              >点击此处 将图片按Ctrl+V 粘贴至此处</span
            >
          </div>
        </el-form-item>

        <div class="footer" style="width: 400px; text-align: center">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel" style="margin-left: 30px"
            >返回上一级</el-button
          >
        </div>
      </el-col>
    </el-form>

    <el-dialog
      :visible.sync="designVisible"
      append-to-body
      title="同步面料最新数据"
      width="500px"
      v-if="designVisible"
    >
      点击数据同步，“特别呈现卖点”内容会被重新获取字典卖点内容，
      当前内容假如需要保存请先保存好再同步数据
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="designsubmitForm">确 定</el-button>
        <el-button @click="designcancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  listCycle,
  getCycle,
  delCycle,
  addCycle,
  updateCycle,
  selectProFabricCycleByName,
} from "@/api/data/cycle";
import {
  listKeyword,
  getKeyword,
  delKeyword,
  addKeyword,
  updateKeyword,
  queryContentByKey,
} from "@/api/data/keyword";
import {
  listAttributes,
  getAttributes,
  delAttributes,
  addAttributes,
  updateAttributes,
} from "@/api/data/attributes";
import {
  listFabric,
  getInfoByName,
  selectFabricNameList,
} from "@/api/data/Fabric";
import {
  listRelation,
  getRelation,
  delRelation,
  addRelation,
  updateRelation,
  upload,
} from "@/api/product/relation";
import {
  listPurchase,
  getPurchase,
  delPurchase,
  addPurchase,
  updatePurchase,
} from "@/api/edit/purchase";
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "Purchase",
  dicts: [
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_one_designtraining",
  ],
  data() {
    return {
      designVisible: false,

      //设计-拍摄场景建议
      designShootingScene: "",
      //面料检测报告
      fabricTestRepor: "",
      // fileLi: [{ url: "" }],
      filefabricTestRepor: [],
      // 设计-洗涤说明
      designWashing: "",
      //文案辅助输入
      xxxx: "",
      allInfos: [],

      //页面上存的暂时特殊图片地址
      // fileSpecial: [{ url: "" }],
      //面料名称
      mianliao: [],
      //胸垫/裤裆
      kudang: [],
      //衣长/裤长
      yichang: [],
      //版型
      banxing: [],
      //属性类别
      shuxing: [],
      //体形
      attributesList: [],
      // 聚拢程度
      julong: [],
      //防震程度/腰高
      yaogao: [],

      value: "",
      lodingy: false,
      options: [],
      //样品特殊图片
      Special: "",
      imgSpecial: [],

      //主搭配
      MatchingPicture: "",
      // fileLi: [{ url: "" }],
      fileMatchingPicture: [],
      //次搭配
      designRecommendPicture: "",
      // file: [{ url: "" }],
      fileRecommendPicture: [],

      proNewRelation: {},
      //图片相对路径
      picurl: "",
      //图片地址
      picUrl: "",
      //logo相对路径
      logoUrl: "",
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 2,
      //页面上存的暂时图片地址List
      // files: [{ url: "" }],
      files: [],
      //页面上存的暂时logo图片地址List
      // fileList: [{ url: "" }],
      // fileList: [],
      //图片地址
      imageUrl: "",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      checked: [],
      checkList: [
        { id: 1, label: "XS" },
        { id: 2, label: "S" },
        { id: 3, label: "M" },
        { id: 4, label: "L" },
        { id: 5, label: "XL" },
        { id: 6, label: "XXL" },
        { id: 7, label: "均码" },
        // { id: 0002, label: '汽车' },
        // { id: 0002, label: '火车' },
      ],
      // pjtUrl: process.env.VUE_APP_BASE_API,
      proTemplateSecondry: {}, //二级
      proTemplate: {}, //一级
      // 表单参数
      form: {
        // proNewProcure:
      },
      proNewProcure: {},
      // 表单校验
      rules: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        designFabricName: null,
        designSpecialPresentation: null,
        designExerciseIntensity: null,
        designFlexibility: null,
        designFitnessLevels: null,
        designSomatosensory: null,
        designSoftness: null,
        designFabricThickness: null,
        designBreathability: null,
        designFabricFunction: null,
        designCategory: null,
        designIntroduce: null,
        designAttributeCategory: null,
        copywritingFabricName: null,
      },
    };
  },

  created() {
    // this.getList();
    this.handleUpdate();
    // this.allInfo()
  },
  methods: {
    //响应提示
    async ShootingScene(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "design",
        keyword: this.designShootingScene,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickShootingScene(msg) {
      console.log("msg", msg);
      if (this.proTemplate.designShootingScene == null) {
        this.proTemplate.designShootingScene = msg.msg;
      } else {
        this.proTemplate.designShootingScene =
          this.proTemplate.designShootingScene + msg.msg;
      }

      this.designShootingScene = "";
    },

    //响应提示
    async queryOption(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "design",
        keyword: this.proTemplate.designWashing,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickSelectMark(msg) {
      console.log("msg", msg);
      this.proTemplate.designWashing = msg.msg;
      // this.designWashing = ''
      // console.log(JSON.stringify(this.proTemplate + msg.msg));

      // if (msg.msg == undefined) {
      //     this.listQuery.storeCode = msg.value;
      // } else {
      //     this.listQuery.storeCode = msg.msg;
      // }
    },
    //响应提示
    async queryOptions(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({ rolename: "design", keyword: this.xxxx }).then(
        (res) => {
          //赋值
          this.allInfos = res.data;
        }
      );
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickSelect(msg) {
      console.log("msg", msg);
      if (this.proTemplate.designSpecialPresentation == null) {
        this.proTemplate.designSpecialPresentation = msg.msg;
      } else {
        // this.proTemplate.copywritingDesignPrinciple = this.proTemplate.copywritingDesignPrinciple + msg.msg
        this.proTemplate.designSpecialPresentation =
          this.proTemplate.designSpecialPresentation + msg.msg;
      }

      this.xxxx = "";
      // console.log(JSON.stringify(this.proTemplate + msg.msg));

      // if (msg.msg == undefined) {
      //     this.listQuery.storeCode = msg.value;
      // } else {
      //     this.listQuery.storeCode = msg.msg;
      // }
    },
    designcancel() {
      this.designVisible = false;
    },
    designsubmitForm() {
      this.change(this.proTemplate.designFabricName);
      this.designVisible = false;
    },
    change(val) {
      console.log(val);
      // console.log(JSON.stringify(this.proTemplate.designPropertyCategory));
      getInfoByName(val).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));
        this.proTemplate.designFlexibility = response.data.designFlexibility;
        this.proTemplate.designFabricFunction =
          response.data.designFabricFunction;
        this.proTemplate.designSpecialPresentation =
          response.data.designSpecialPresentation;
        this.proTemplate.designExerciseIntensity =
          response.data.designExerciseIntensity;
        this.proTemplate.designFitnessLevels =
          response.data.designFitnessLevels;
        this.proTemplate.designSomatosensory =
          response.data.designSomatosensory;
        this.proTemplate.designSoftness = response.data.designSoftness;
        this.proTemplate.designFabricThickness =
          response.data.designFabricThickness;
        this.proTemplate.designBreathability =
          response.data.designBreathability;
        this.proTemplate.fabricTestRepor = response.data.fabricTestRepor;
        // this.proTemplate.
        this.proTemplate.copywritingFamily = response.data.copywritingFamily;
        this.proTemplate.copywritingFabricName =
          response.data.copywritingFabricName;

        this.proTemplate.procureWeavingPeriod =
          response.data.procureWeavingPeriod;
        this.proTemplate.procureStainPeriod = response.data.procureStainPeriod;
        this.$modal.msgSuccess("同步成功");
      });
      selectProFabricCycleByName(val).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));

        // this.proTemplate.copywritingFamily = response.data.copywritingFamily
        // this.proTemplate.copywritingFabricName = response.data.copywritingFabricName
        // this.proTemplate.designFabricFunction = response.data.designFabricFunction
        // this.proTemplate.designSpecialPresentation = response.data.designSpecialPresentation
        // this.proTemplate.designExerciseIntensity = response.data.designExerciseIntensity
        // this.proTemplate.designFitnessLevels = response.data.designFitnessLevels
        // this.proTemplate.designSomatosensory = response.data.designSomatosensory
        // this.proTemplate.designSoftness = response.data.designSoftness
        // this.proTemplate.designFabricThickness = response.data.designFabricThickness
        // this.proTemplate.designBreathability = response.data.designBreathability
      });
    },

    editSelect(e) {
      if (!e) {
        this.remoteMethod();
      }
    },
    // 远程搜索枚举值
    remoteMethod() {
      this.lodingy = true;
      listFabric()
        .then((res) => {
          console.log(JSON.stringify(res));
          this.options = res.rows ? res.rows.designFabricName : [];
          this.lodingy = false;
        })
        .catch((err) => {
          this.options = [];
          this.lodingy = false;
          console.log(err);
        });
    },
    updateData(event) {
      //更新操作
      console.log("updated");
      getInfoByName(this.proTemplate.designFabricName).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));

        this.proTemplate.designFabricFunction =
          response.data.designFabricFunction;
        this.proTemplate.designSpecialPresentation =
          response.data.designSpecialPresentation;
        this.proTemplate.designExerciseIntensity =
          response.data.designExerciseIntensity;
        this.proTemplate.designFitnessLevels =
          response.data.designFitnessLevels;
        this.proTemplate.designSomatosensory =
          response.data.designSomatosensory;
        this.proTemplate.designSoftness = response.data.designSoftness;
        this.proTemplate.designFabricThickness =
          response.data.designFabricThickness;
        this.proTemplate.designBreathability =
          response.data.designBreathability;
        this.proTemplate.designFlexibility = response.data.designFlexibility;
      });
    },
    //回车失去焦点
    enterBlur(event) {
      event.target.blur();
      // console.log(event.target.blur());
    },
    test() {
      this.$modal.msgError("禁止修改尺寸");
    },
    /** 查询产品采购信息列表 */
    getList() {
      this.loading = true;
      listPurchase(this.queryParams).then((response) => {
        this.purchaseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.$router.go(-1);
      return;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.files = undefined; //加的是这一行
      // this.fileList = undefined;//加的是这一行
      this.fileLi = undefined; //加的是这一行
      this.fileRecommendPicture = undefined; //加的是这一行
      this.proNewProcure = {
        id: null,
        proNewId: null,
        orderNum: null,
        orderTime: null,
        fabricCycle: null,
        workshopCycle: null,
        shippingTime: null,
        fabricComposition: null,
        isDelete: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    // get() {
    //     this.queryParam = { categoryName: this.proTemplate.firstLevelColumn, attributesName: '体型/胸型' }
    //     this.loading = true;
    //     listAttributes(this.queryParam).then(response => {
    //         this.attributesList = response.rows;
    //         console.log(JSON.stringify(response.rows));
    //         this.total = response.total;
    //         this.loading = false;
    //     });

    // },
    // getdesignPropertyCategory() {
    //     this.queryParam = { categoryName: this.proTemplate.firstLevelColumn, attributesName: '属性类别' }
    //     this.loading = true;
    //     listAttributes(this.queryParam).then(response => {
    //         // this.attributesList = response.rows;
    //         this.shuxing = response.rows
    //         console.log(JSON.stringify(response.rows));
    //         this.total = response.total;
    //         this.loading = false;
    //     });
    // },
    // getdesignFitCup() {
    //     this.queryParam = { categoryName: this.proTemplate.firstLevelColumn, attributesName: '版型' }
    //     this.loading = true;
    //     listAttributes(this.queryParam).then(response => {
    //         // this.attributesList = response.rows;
    //         this.banxing = response.rows
    //         console.log(JSON.stringify(response.rows));
    //         this.total = response.total;
    //         this.loading = false;
    //     });
    // },
    // getyichang() {
    //     this.queryParam = { categoryName: this.proTemplate.firstLevelColumn, attributesName: '衣长/裤长' }
    //     this.loading = true;
    //     listAttributes(this.queryParam).then(response => {
    //         // this.attributesList = response.rows;
    //         this.yichang = response.rows
    //         console.log(JSON.stringify(response.rows));
    //         this.total = response.total;
    //         this.loading = false;
    //     });
    // },
    // //裤裆
    // getkudang() {
    //     this.queryParam = { categoryName: this.proTemplate.firstLevelColumn, attributesName: '胸垫/裤裆' }
    //     this.loading = true;
    //     listAttributes(this.queryParam).then(response => {
    //         // this.attributesList = response.rows;
    //         this.kudang = response.rows
    //         console.log(JSON.stringify(response.rows));
    //         this.total = response.total;
    //         this.loading = false;
    //     });
    // },
    // // 聚拢程度
    // getjulong() {
    //     this.queryParam = { categoryName: this.form.firstLevelColumn, attributesName: '聚拢程度' }
    //     this.loading = true;
    //     listAttributes(this.queryParam).then(response => {
    //         // this.attributesList = response.rows;
    //         this.julong = response.rows
    //         console.log(JSON.stringify(response.rows));
    //         this.total = response.total;
    //         this.loading = false;
    //     });
    // },
    // 防震程度/腰高
    getyaogao(categoryName, attributesName) {
      // this.queryParam = { categoryName:, attributesName: }
      this.loading = true;
      listAttributes({
        categoryName: categoryName,
        attributesName: attributesName,
      }).then((response) => {
        // this.attributesList = response.rows;
        if (attributesName == "防震程度/腰高") {
          this.yaogao = response.rows;
        } else if (attributesName == "聚拢程度") {
          this.julong = response.rows;
        } else if (attributesName == "胸垫/裤裆") {
          this.kudang = response.rows;
        } else if (attributesName == "衣长/裤长") {
          this.yichang = response.rows;
        } else if (attributesName == "版型") {
          this.banxing = response.rows;
        } else if (attributesName == "属性类别") {
          this.shuxing = response.rows;
        } else if (attributesName == "体型/胸型") {
          this.attributesList = response.rows;
        }

        console.log(JSON.stringify(response.rows));
        // this.total = response.total;
        this.loading = false;
      });
    },
    //面料名称
    getmianliao() {
      this.loading = true;
      selectFabricNameList().then((response) => {
        console.log(JSON.stringify(response));
        this.mianliao = response;
        // console.log(JSON.stringify(this.FabricList));
        // this.total = response.total;
        this.loading = false;
      });
    },
    handledata() {
      this.designVisible = true;
    },
    // handledata() {
    //     //   const ids = row.id || this.ids;
    //     this.$modal.confirm('点击数据同步， 特别呈现卖点 内容会被重新获取字典卖点内容， 当前内容假如需要保存请先保存好再同步数据').then(function () {
    //         return this.change(this.proTemplate.designFabricName)
    //     }).then(() => {
    //         this.handleUpdate();
    //         this.$modal.msgSuccess("同步成功");
    //     }).catch(() => { });
    // },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      // const id = row.id || this.ids
      const id = this.$route.query.id;
      if (!id) {
        this.$modal.msgError("请点击左侧菜单-上新管理进入");
        return;
      }
      getRelation(id).then((response) => {
        this.proNewRelation = response.data.proNewRelation;
        if (response.data.proNewProcure) {
          this.proNewProcure = response.data.proNewProcure;
        }

        //二级
        this.proTemplateSecondry = response.data.proTemplateSecondry;
        this.logoUrl = response.data.proTemplateSecondry.logoUrl;
        this.picurl = response.data.proTemplateSecondry.picUrl;
        //一级
        this.proTemplate = response.data.proTemplate;
        //防震程度/腰高
        this.getyaogao(this.proTemplate.firstLevelColumn, "防震程度/腰高");
        this.getyaogao(this.proTemplate.firstLevelColumn, "聚拢程度");
        this.getyaogao(this.proTemplate.firstLevelColumn, "胸垫/裤裆");
        this.getyaogao(this.proTemplate.firstLevelColumn, "版型");
        this.getyaogao(this.proTemplate.firstLevelColumn, "属性类别");
        this.getyaogao(this.proTemplate.firstLevelColumn, "体型/胸型");
        this.getyaogao(this.proTemplate.firstLevelColumn, "衣长/裤长");
        //面料名称
        this.getmianliao();
        this.form = response.data;
        console.log(JSON.stringify(this.form));

        // this.change(this.proTemplate.designFabricName)
        this.open = true;
        this.title = "修改产品采购信息";
        this.Special = response.data.proNewRelation.designSpecialCasesPic;
        this.designRecommendPicture =
          response.data.proTemplate.designRecommendPicture;
        this.MatchingPicture =
          response.data.proNewRelation.designMatchingPicture;
        //图片回显
        this.fileRecommendPicture = response.data.proTemplate
          .designRecommendPicture
          ? [
              {
                url:
                  process.env.VUE_APP_BASE_API +
                  response.data.proTemplate.designRecommendPicture,
              },
            ]
          : []; //次搭配图片加的是这一行

        this.fileMatchingPicture = response.data.proNewRelation
          .designMatchingPicture
          ? [
              {
                url:
                  process.env.VUE_APP_BASE_API +
                  response.data.proNewRelation.designMatchingPicture,
              },
            ]
          : []; //主图片加的是这一行
        // this.files = response.data.proTemplateSecondry.picUrl ? [
        //     { url: process.env.VUE_APP_BASE_API + response.data.proTemplateSecondry.picUrl }] : []//图片加的是这一行
        // this.fileList = response.data.proTemplateSecondry.logoUrl ? [
        //     { url: process.env.VUE_APP_BASE_API + response.data.proTemplateSecondry.logoUrl }] : []//logo图片加的是这一行
        this.imgSpecial = response.data.proNewRelation.designSpecialCasesPic
          ? [
              {
                url:
                  process.env.VUE_APP_BASE_API +
                  response.data.proNewRelation.designSpecialCasesPic,
              },
            ]
          : []; //样品图片加的是这一行
        //尺寸回显

        if (
          response.data.proNewVO.proNewSizeList &&
          response.data.proNewVO.proNewSizeList.length > 0
        ) {
          let val = response.data.proNewVO.proNewSizeList.map((item) => {
            return item.size;
          });
          console.log(JSON.stringify(val));
          let m = [];
          for (let i = 0; i < val.length; i++) {
            // const element = array[i];
            this.checkList.forEach((item) => {
              if (val[i] == item.label) {
                m.push(item.id);
              }
            });
          }

          console.log(JSON.stringify(m));
          this.checked = m;
          // this.$set(this.form, 'checked', m)
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      // this.form.proTemplate.fabricTestRepor = this.fabricTestRepor
      // designRecommendPicture
      console.log(JSON.stringify(this.Special));
      this.form.proNewRelation.designSpecialCasesPic = this.Special;
      this.form.proTemplate.designRecommendPicture =
        this.designRecommendPicture;
      this.form.proNewRelation.designMatchingPicture = this.MatchingPicture;
      // this.form.proTemplateSecondry.picUrl = this.picurl
      // this.form.proTemplateSecondry.logoUrl = this.logoUrl; // 注：重要(用于添加到数据库)，
      this.form.proNewProcure = this.proNewProcure;
      console.log(JSON.stringify(this.form));
      updateRelation(this.form).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        console.log(JSON.stringify(response));
        this.handleUpdate();
      });
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
          } else {
            // addPurchase(this.form).then(response => {
            //     this.$modal.msgSuccess("新增成功");
            //     this.open = false;
            //     this.getList();
            // });
          }
        }
      });
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 5;
      // if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url;
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureSuccessPic(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.picUrl = file.response.url;
      // const url = file.response.fileName;
      this.picurl = file.response.fileName;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.imageUrl = file.response.url;
      // const url = file.response.fileName;
      // this.logoUrl = file.response.fileName;
      // console.log(JSON.stringify(url));
    },
    //图片上传成功后的回调
    handlePictureSuccessCustomer(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.customerPicture = file.response.url;
      // const url = file.response.fileName;
      this.customerPicture = file.response.fileName;
      console.log(JSON.stringify(this.customerPicture));
    },
    //图片上传成功后的回调
    handlePictureSuccessRecommendPicture(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.customerPicture = file.response.url;
      // const url = file.response.fileName;
      this.designRecommendPicture = file.response.fileName;
      console.log(JSON.stringify(this.customerPicture));
    },
    //图片上传成功后的回调
    handlePictureSuccessSpecial(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.customerPicture = file.response.url;
      // const url = file.response.fileName;
      this.Special = file.response.fileName;
      console.log(JSON.stringify(this.Special));
    },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },

    changeFile1(file, fileSpecial) {
      if (fileSpecial.length > 1) {
        this.fileSpecial = fileSpecial.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
    changeFile2(file, fileList) {
      if (fileList.length > 1) {
        this.filefabricTestRepor = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.picUrl = file.response.url;
      // // const url = file.response.fileName;
      // this.picurl = file.response.urle;
      this.fabricTestRepor = file.response.fileName;
      console.log(this.fabricTestRepor);
    },

    //Special图片
    handleSpecial(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.imgSpecial.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return;
      }
      this.$refs.uploadSpecial.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadSpecial.submit(); // 提交图片上传队列
    },
    //上传
    changeSpecial(file, fileList) {
      // this.fileList = fileList
      console.log("成功", file, fileList);
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.imgSpecial = fileList.slice(-1);
      }
    },

    uploadSpecial(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.Special = file.response.fileName;
    },

    //次主推图片
    handleRecommendPicture(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.fileRecommendPicture.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return;
      }
      this.$refs.uploadRecommendPicture.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadRecommendPicture.submit(); // 提交图片上传队列
    },
    //上传
    changeRecommendPicture(file, fileList) {
      // this.fileList = fileList
      console.log("成功", file, fileList);
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.fileRecommendPicture = fileList.slice(-1);
      }
    },
    RemoveRecommendPicture() {
      this.designRecommendPicture = "";
    },
    uploadRecommendPicture(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.designRecommendPicture = file.response.fileName;
    },

    //主推图片
    handleMatchingPicture(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.fileMatchingPicture.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return;
      }
      this.$refs.uploadMatchingPicture.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadMatchingPicture.submit(); // 提交图片上传队列
    },
    //上传
    changeMatchingPicture(file, fileList) {
      // this.fileList = fileList
      console.log("成功", file, fileList);
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.fileMatchingPicture = fileList.slice(-1);
      }
    },
    RemoveMatchingPicture() {
      this.MatchingPicture = "";
    },
    uploadMatchingPicture(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.MatchingPicture = file.response.fileName;
    },
  },
};
</script>
<style scoped lang="scss">
// ::v-deep .inline-input {
//     // ::v-deep .el-scrollbar__wrap {
//     max-height: 360px;
//     /*no*/
//     // }
// }
// .my {
//     height: 360px !;
// }
// 修改下拉列表的宽度，使得其可以自动适应内容。
::v-deep .el-autocomplete .el-popper {
  width: auto !important;
}

.select-option {
  div {
    width: 310px;
    height: 300px;
  }
}
</style>